import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { authTokenState } from "../state";
import { useI18n } from "../i18n";

const Splash: React.FunctionComponent = () => {
  const navigate = useNavigate();
  const token = useRecoilValue(authTokenState);
  const { t, locale, setLocale } = useI18n();
  const [showLanguageDialog, setShowLanguageDialog] = React.useState(false);

  // 检查是否已经看过引导页
  useEffect(() => {
    const introSeen = localStorage.getItem('introSeen');
    if (introSeen === '1') {
      // 如果已经看过引导页，直接跳转
      if (token) {
        navigate('/home', { replace: true });
      } else {
        navigate('/login', { replace: true });
      }
    }
  }, [navigate, token]);

  const handleGetStarted = () => {
    localStorage.setItem('introSeen', '1');
    if (token) {
      navigate('/home', { replace: true });
    } else {
      navigate('/login', { replace: true });
    }
  };

  // 清除引导页缓存（用于测试或重置）
  const clearIntroCache = () => {
    localStorage.removeItem('introSeen');
    window.location.reload();
  };

  const languages = [
    { code: 'zh', name: '简体中文' },
    // { code: 'en', name: 'English' },
    { code: 'vi', name: 'Tiếng Việt' },
    // { code: 'es', name: 'Español' }
  ];

  const currentLang = languages.find(l => l.code === locale)?.name || '简体中文';

  return (
    <div style={{
      position: 'fixed',
      inset: 0,
      background: '#FF6B35', // 橙色背景
      display: 'flex',
      flexDirection: 'column',
      color: 'white'
    }}>
      {/* 顶部状态栏 */}
      <div style={{ height: 48 }} />
      
      {/* 语言选择器 */}
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        marginTop: 5
      }}>
        <div
          onClick={() => setShowLanguageDialog(true)}
          style={{
            // background: '#EB0045', // 红色按钮
            background: 'rgba(0, 0, 0, 0.3)',
            borderRadius: 22,
            height: 44,
            minWidth: 120,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '0 8px',
            cursor: 'pointer'
          }}
        >
          <span style={{ fontSize: 17, fontWeight: '500' }}>{currentLang}</span>
          <div style={{
            width: 44,
            height: 44,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginLeft: 'auto'
          }}>
            <div style={{
              width: 0,
              height: 0,
              borderLeft: '6px solid transparent',
              borderRight: '6px solid transparent',
              borderTop: '8px solid white'
            }} />
          </div>
        </div>
      </div>

      {/* 中央插图区域 */}
      <div style={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '64px 8px 0',
        position: 'relative'
      }}>
        {/* 引导图背景 */}
        <div style={{
          width: '100%',
          maxWidth: 400,
          height: 300,
          backgroundImage: 'url(./src/assets/img/login/pic@2x.png)',
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
        </div>
      </div>

      {/* 底部文字和按钮 */}
      <div style={{
        padding: '0 8px 40px',
        textAlign: 'center'
      }}>
        <div style={{
          fontSize: 19,
          fontWeight: 'bold',
          marginBottom: 28,
          lineHeight: 1.4
        }}>
          {t('home.guideHint')}
        </div>
        
        <button
          onClick={handleGetStarted}
          style={{
            width: '100%',
            height: 52,
            background: '#000',
            color: 'white',
            border: 'none',
            borderRadius: 26,
            fontSize: 17,
            fontWeight: 'bold',
            cursor: 'pointer',
            marginBottom: import.meta.env.DEV ? 10 : 0
          }}
        >
          {t('home.getStarted')}
        </button>

        {/* 开发环境下的清除缓存按钮 */}
        {/* {import.meta.env.DEV && (
          <button
            onClick={clearIntroCache}
            style={{
              width: '100%',
              height: 40,
              background: 'rgba(255, 255, 255, 0.2)',
              color: 'white',
              border: '1px solid rgba(255, 255, 255, 0.3)',
              borderRadius: 20,
              fontSize: 14,
              cursor: 'pointer'
            }}
          >
            清除引导页缓存 (开发模式)
          </button>
        )} */}
      </div>

      {/* 语言选择对话框 */}
      {showLanguageDialog && (
        <div style={{
          position: 'fixed',
          inset: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            background: 'white',
            borderRadius: 12,
            padding: 20,
            width: '80%',
            maxWidth: 300
          }}>
            <div style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 16, textAlign: 'center', color: '#333' }}>
              {t('common.selectLanguage')}
            </div>
            {languages.map((lang) => (
              <div
                key={lang.code}
                onClick={() => {
                  setLocale(lang.code as any);
                  setShowLanguageDialog(false);
                }}
                style={{
                  padding: '12px 16px',
                  cursor: 'pointer',
                  color: '#333',
                  borderBottom: '1px solid #eee'
                }}
              >
                {lang.name}
              </div>
            ))}
            <button
              onClick={() => setShowLanguageDialog(false)}
              style={{
                width: '100%',
                marginTop: 16,
                padding: '12px',
                background: '#f5f5f5',
                border: 'none',
                borderRadius: 8,
                cursor: 'pointer'
              }}
            >
              取消
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Splash;


